<template>
  <div class="personal-info-container">
    <el-button
      class="back-button"
      type="primary"
      icon="ArrowLeft"
      @click="goBack"
    >
      返回
    </el-button>

    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <span>个人信息</span>
        </div>
      </template>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="用户ID">
          {{ userStore.id }}
        </el-descriptions-item>
        <el-descriptions-item label="用户名">
          {{ userStore.name }}
          <el-button
            class="edit-button"
            type="primary"
            icon="Edit"
            circle
            size="small"
            @click="openEditDialog"
          />
        </el-descriptions-item>
        <el-descriptions-item label="邮箱">
          {{ userStore.email }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-dialog
      v-model="editDialogVisible"
      title="修改用户名"
      width="30%"
      :before-close="handleClose"
    >
      <el-input v-model="newUsername" placeholder="请输入新的用户名" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateUsername"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/stores/userStore";
import { useRouter } from "vue-router";
import { httpClient } from "@/libs/http-client";

const userStore = useUserStore();
const router = useRouter();

const editDialogVisible = ref(false);
const newUsername = ref("");

const openEditDialog = () => {
  newUsername.value = userStore.name;
  editDialogVisible.value = true;
};

const handleClose = (done: () => void) => {
  newUsername.value = "";
  done();
};

const updateUsername = () => {
  if (newUsername.value.trim()) {
    httpClient
      .put("/userInfo/updateName", null, {
        params: {
          name: newUsername.value.trim(),
        },
      })
      .then((data) => {
        console.log("更新用户名成功:", data),
          ElMessage.success("更新用户名成功");
        userStore.setUser({
          ...userStore.$state,
          name: newUsername.value.trim(),
        });
      });

    editDialogVisible.value = false;
  } else {
    ElMessage.error("用户名不能为空");
  }
};

const goBack = () => {
  router.back();
};
</script>

<style scoped>
.personal-info-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
}

.info-card {
  width: 400px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.edit-button {
  margin-left: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.back-button {
  position: absolute;
  left: 20px;
  top: 20px;
}
</style>